<template>
  <view class="pd pt20 dsfdttxe">
    <view class="bgff ffgtyser ov">
      <view class="pr jjhhxder cffrtyyu">
        <view class="kjkjhhxner row ab">
          <view class="xdeeert pr">
            <image
              :src="'https://www.waibizi.com/' + $store.getters.getUserInfo.photo"
              class="kjjmxeert"
            ></image>
          </view>
          <view class="col pl30">
            <view class="mt10">
              <view v-if="detail.historyList.length" class="fz30 z3">
                {{
                  detail.historyList.filter((i) => {
                    return i.result === 1;
                  }).length
                    ? detail.historyList.filter((i) => {
                        return i.result === 1;
                      })[0].operatorName
                    : ""
                }}
              </view>
            </view>
            <view v-if="detail.flowList && detail.flowList.length" class="fz26 z3 mt40">
              <view v-if="pageQuery.status == 1">当前状态 ：<text class="red">审核不通过</text></view>
              <view v-else-if="detail.flowList.length-1 != detail.historyList.length">
                当前状态 ：等待
                <text v-if="detail.historyList.length && detail.flowList[detail.historyList.length]" class="red">{{
                  detail.flowList[detail.historyList.length].name
                }}</text
                > 
                 <text v-else-if="!detail.historyList.length" class="red">{{
                  detail.flowList[1].name
                }}</text
                > 
                审核
              </view>
              <view v-else>当前状态 ：<text class="red">审核完成</text></view>
            </view>
          </view>
        </view>
      </view>
      <view class="pr pd pt30 row jjhhxder">
        <view class="col">
          <image
            src="../../../static/img/louzuo.png"
            class="koujxert cz"
            mode="widthFix"
          ></image>
          <text class="ls fz28 ml10">{{ detail.fieldTypeName }}</text>
        </view>
        <view class="col-2 tr z9 fz26 pt10 word">
          编号：{{ detail.applyFormSn }}
        </view>
      </view>

      <view class="pd pt40 fz24 jjhhxder pr">
        <view class="z3">
          <text class="z9">申请人</text>
          <text class="ml10">{{ detail.chargeName }}</text>
        </view>
        <view class="z3 mt20">
          <text class="z9">申请人所属单位</text>
          <text class="ml10">{{ detail.unityName }}</text>
        </view>
        <view class="z3 mt20">
          <text class="z9">开始时间</text>
          <text class="ml10">{{ detail.startTime }}</text>
        </view>
        <view class="z3 mt20">
          <text class="z9">结束时间</text>
          <text class="ml10">{{ detail.endTime }}</text>
        </view>
        <view class="z3 mt20">
          <text class="z9">时长</text>
          <text class="ml10">{{ longTime }}</text>
        </view>
        <view v-if="detail.equipmentAmount" class="z3 mt20">
          <text class="z9">申请设备</text>
          <text class="ml10">
            <text
              class="equipment-item"
              v-for="(item, index) in JSON.parse(detail.equipmentAmount)"
              :key="'equipment_' + index"
            >
              {{ item.name }}: {{ item.amount }} &nbsp;&nbsp;
            </text>
          </text>
        </view>
        <view class="z3 mt20">
          <text class="z9">申请理由</text>
          <text class="ml10">{{ detail.purpose }}</text>
        </view>
        <view class="z3 mt20">
          <text class="z9">提交日期</text>
          <text class="ml10">{{ detail.createTime }}</text>
        </view>
        <view class="z3 mt20 row sdfdsfrt">
          <text class="z9">活动推文</text>

          <text class="ml10 col">
            <image
              class="tw"
              :src="'https://www.waibizi.com/' + detail.planAddress"
              mode=""
            />
          </text>
        </view>
      </view>

      <view class="pd pt30">
        <view class="fz26 z6">
          审批流程记录
        </view>

        <view class="kjeert pr mt40">
          <view class="dfddyxeer"> </view>
          <view
            v-for="(item, index) in detail.flowList"
            :key="'flow_' + index"
            class="kjkjhhxner"
          >
            <view class="row">
              <view v-if="item.operatorPhoto" class="xdeeert pr">
                <image :src="item.operatorPhoto" class="kjjmxeert"></image>
                <icon
                  v-if="item.result == 1 || (index == 0 && item.result !== 0)"
                  type="success_no_circle"
                  size="16"
                  class="cderrrtxe"
                ></icon>
                <icon
                  v-if="item.result == 2 || item.result == 0"
                  type="clear"
                  size="16"
                  class="cderrrtxe"
                ></icon>
              </view>
              <view v-else-if="!item.operatorPhoto && detail.flowList[index-1] && detail.flowList[index-1].operatorPhoto && index != detail.flowList.length -1 && detail.flowList[index-1].result != 2" class="xdeeert pr">
                <view class="yj kjjxeeert">
                 <image
                    src="../../../static/img/xunuhu.png"
                    class="kjjmxeert"
                  ></image>
                </view>
              </view>
              <view v-else-if="(!item.operatorPhoto && detail.flowList[index-1] && !detail.flowList[index-1].operatorPhoto) || index == detail.flowList.length -1 || detail.flowList[index-1].result == 2" class="xdeeert pr">
                <view class="yj kjjxeeert cccc">
                  <view class="kjjnxeer yj"></view>
                </view>
              </view>
              <view class="col pl60">
                <view class="row mt10">
                  <view class="fz30 z3">
                    {{item.name}}
                  </view>
                  <view class="fz26 z9 tr col">
                    {{ item.createTime }}
                  </view>
                </view>
                <view v-if="item.result == 1 || item.result == 2" class="fz26 z3 mt40">
                  {{ item.unityName }}
                </view> 
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bjhgser row cen">
      <view class="col" v-for="(sd, idx) in jhhbbde" :key="'col'+idx" @tap="jhgxer(idx)">
        <view class="jhjdrert">
          <image :src="sd.icon" class="kjhxeeert cz"></image>
        </view>
        <view class="fz24 z3">
          {{ sd.name }}
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        status: "",
        applyFormId: "",
        note: "",
      },
      detail: {
        equipmentAmount: '',
        fieldTypeName: "",
        historyList: '',
      },
      jhhbbde: [
        {
          name: "撤销",
          icon: "../../../static/img/fddfa.png",
        },
        {
          name: "重申",
          icon: "../../../static/img/fddfb.png",
        },
        {
          name: "打印",
          icon: "../../../static/img/fddfc.png",
        },
      ],
    };
  },
  mounted() {
    this.formData.applyFormId = this.pageQuery.applyFormId;
    if(this.pageQuery.status == 1 || this.pageQuery.status == 4 || this.pageQuery.status == 2) {
        this.jhhbbde =[
        {
          name: "重申",
          icon: "../../../static/img/fddfb.png",
        },
        {
          name: "打印",
          icon: "../../../static/img/fddfc.png",
        },
      ]
    }
    this.init();
  },
  computed: {
    longTime() {
      if(!this.detail.startTime) return ''
      let startTime = this.detail.startTime.split(" ")[1];
      let endTime = this.detail.endTime.split(" ")[1];
      let h = endTime.split(":")[0] - startTime.split(":")[0];
      let min = endTime.split(":")[1] - startTime.split(":")[1];

      if (min < 0) {
        h -= 1;
        min = -min;
      }
      return h + "小时" + min + "分钟";
    },
  },
  methods: {
    async init(status) {
      let that = this;
      this.formData.status = status;
      let res;

      // 已审核
      res = await this.$api.applyForm(this.formData.applyFormId);
      if (res.code == 200) {
    
        res.data.flowList = res.data.flowList.map((i,index)=> {
          let historyItem = res.data.historyList[index];
          if(historyItem) {
            i.result = historyItem.result;
            i.name = historyItem.operatorName;
            i.createTime = historyItem.createTime;
            i.unityName = historyItem.unityName;
            i.operatorPhoto = 'https://www.waibizi.com/'+historyItem.operatorPhoto
          }
          return i;
        })
        if(!res.data.historyList.length) {
          res.data.flowList.unshift({
            name: res.data.chargeName, 
            createTime:res.data.createTime,
            operatorPhoto:'https://www.waibizi.com/'+ this.$store.getters.getUserInfo.photo
          })
        }
        res.data.flowList.push({name:'分配完成'})
        this.detail = res.data;
      }
    },
    jhgxer(idx) {
      if (idx === 0) {
       let text = ''
        if(this.detail.status == 0) {
          text = '该申请未通过，是否撤销'
         } else if(this.detail.status == 1) {
          text = '该申请未通过，是否撤销'
        } else if(this.detail.status == 2) {
          text = '该申请已通过，是否撤销'
        } else if(this.detail.status == 3) {
          text = '该申请已完成，是否撤销'
        } 
        uni.showModal({
          title: "提示",
          content: text,
          success: async (a) => {
            if (a.confirm) {
              let res = this.$api.applyClose(this.formData.applyFormId);
              uni.navigateBack({
                url: "/pages/gongzuo/shenqing/index",
              });
            }
          },
        });
      } else if (idx === 1) {
         uni.showModal({
          title: "提示",
          content: '是否确认重申',
          success: async (a) => {
            uni.navigateTo({
              url:
                "/pages/gongzuo/shenqing/kcsq?topFieldTypeId="+this.detail.fieldTypeId+"&applyFormId=" +
                this.formData.applyFormId,
            });
          },
        });
      } else if (idx === 2) {
      }
    },
  },
};
</script>
<style scoped>
/deep/ .uni-icon-clear{
  color: #ff4b5c;
}

.word{
  word-break: break-all;
}

.tw,
/deep/ .tw img {
  width: 300upx;
  height: 200upx;
  opacity: 1 !important;
}
.ffgtyser {
  position: relative;
  border-radius: 8upx;
}

.koujxert {
  width: 60upx;
}

.jjhhxder {
  padding-bottom: 30upx;
  border-bottom: 1px dashed #e0e0e0;
}

.jjhhxder::after,
.jjhhxder::before {
  content: " ";
  width: 40upx;
  height: 40upx;
  position: absolute;
  left: -20upx;
  bottom: -20upx;
  border-radius: 50%;
  background: #f7f7f7;
}

.jjhhxder::before {
  left: inherit;
  right: -20upx;
}

.kjjmxeert {
  width: 140upx;
  height: 140upx;
  padding: 10upx;
  background: #fff;
  border: 1px solid #e0e0e0;
}

.xdeeert {
  width: 140upx;
}

.cderrrtxe {
  position: absolute;
  right: -40upx;
  bottom: 20upx;
}

.kjkjhhxner {
  margin-bottom: 40upx;
}

.kjkjhhxner.ab {
  margin-bottom: 0;
}

.kjjxeeert {
  text-align: center;
}

.kjjxeeert image {
  width: 80upx;
  height: 80upx;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
}

.kjjnxeer {
  background: #989898;
  border-radius: 50%;
  width: 40upx;
  height: 40upx;
  display: inline-block;
  margin-top: 16upx;
  border: 4upx solid #fff;
}

.dfddyxeer {
  position: absolute;
  left: 65upx;
  top: 0;
  width: 10upx;
  height: 98%;
  background: #bbbbbb;
}

.dsfdttxe {
  padding-bottom: 120upx;
}

.cffrtyyu {
  padding: 20upx 20upx;
}

.jhjdrert::after {
  display: none;
}
</style>
